<template>
<el-card shadow="never">
  <template #header>
    <div class="card-header">
      <img src="@/assets/logo.png" alt="logo.png" width="35" height="35" style="vertical-align: middle;">
      <span style="vertical-align: middle;">商品列表</span>
    </div>
  </template>

  <el-row :gutter="10">
    <el-col :span="4">
      <el-input placeholder="请输入搜索关键词" v-model="searchContent"></el-input>
    </el-col>
    <el-col :span="4">
      <el-button type="primary" @click="handlerSearch">搜索</el-button>
      <el-button type="primary" @click="DialogVisible = true">添加</el-button>
    </el-col>

      <el-table :data="tableData" style="width: 100%">

        <el-table-column label="编号" width="180">
          <template #default="scope">
            <i class="el-icon-time"/><span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        
        <el-table-column label="商品名称" width="180">
          <template #default="scope">
            <el-popover effect="light" trigger="hover" placement="top">
              <template #default>
                <p>商品名称: {{ scope.row.title }}</p><p>商品价格: {{ scope.row.price }}</p>
              </template>
              <template #reference>
                <div class="name-wrapper"><el-tag size="medium">{{ scope.row.title }}</el-tag></div>
              </template>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column label="商品图片" width="180">
          <template #default="scope">
            <span style="margin-left: 10px">
              <img :src="url + scope.row.thumbnail" alt="" width="180" height="180">
            </span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
        <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" :current-page="currentPage" @current-change="PageChange" small />
  </el-row>
  <add-product v-model="DialogVisible" @response="responseDetail"></add-product>

  <edit-product v-if="editDialogVisible" v-model="editDialogVisible" @response="responseDetail" :pid="pid"></edit-product>

</el-card>

</template>

<script lang='js'>
import { defineComponent, reactive, onMounted, toRefs, ref } from "vue";
import addProduct from "@/view/goods/addProduct.vue";
import editProduct from "@/view/goods/editProduct.vue";
import { ElMessageBox, ElNotification, ElMessage } from 'element-plus';
import { GOODSLIST } from '@/api';
async function loadData(state, pagination) {
  const params = { pageNumber: pagination.currentPage, pageSize: pagination.pageSize, search: state.searchContent };
  // const { list, totalCount } = await ajax({url: 'goods', params});
  const { data: {list}, totalCount } = await GOODSLIST(params);
  state.tableData = list;
  pagination.total = totalCount;
}
function useDelete(state) {
  const handleDelete = async (index, row) => {
    const confirmResult = await ElMessageBox.confirm('确定要删除该数据?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).catch(err => err)
    if (confirmResult !== 'confirm') return ElMessage.info('取消删除！');
    const result = await ajax({url: 'goods/delete', params: { id: row.id }, method: 'delete'});
    if (result.code === 'ok') ElNotification({ title: '成功', message: '删除成功', type: "success", duration: 2000 });
    loadData.call(null, state);
  }
  return {
    handleDelete
  }
}
function useHandleSerch(state, pagination) {
  const handlerSearch = async () => {
      pagination.currentPage = 1;
      const params = { pageNumber: pagination.currentPage, pageSize: pagination.pageSize, search: state.searchContent }
      const { list, totalCount } = await ajax({ url: 'goods', params });
      state.tableData = list;
      pagination.total = totalCount;
    }

  return { handlerSearch }
}
function useEdit(state) {
  const handleEdit = (index, row) => {
    state.editDialogVisible = true;
    state.pid = row.id;
  }

  return { handleEdit }
}
export default defineComponent({
  name: "~home",
  components: { addProduct, editProduct },
  setup(props, { emit, slots }) {
    const state = reactive({
      searchContent: '',
      tableData: [],
      DialogVisible: false,
      editDialogVisible: false,
      url: import.meta.env.VITE_APP_URL,
      pid: 0,
      responseDetail() {
        loadData.call(null, state, pagination);
      }
    });
    const pagination = reactive({
      total: '',
      pageSize: '1',
      currentPage: '1',
      PageChange(val) {
        pagination.currentPage = val;
        loadData(state, pagination);
      }
    });
    onMounted(loadData.call(null, state, pagination));

    return {
      ...toRefs(state),
      ...toRefs(pagination),
      ...useDelete(state),
      ...useHandleSerch(state, pagination),
      ...useEdit(state)
    };
  }
});
</script>

<style lang='css' scoped>
</style>
